import React, { Component } from 'react'
import { Frame } from "./components"
//引入路由组件
import {
    Switch,
    Route,
    Redirect
} from "react-router-dom"
import routes from "./routes"
//判断权限,如果route组件里面的isNav为true的话保留下来，为false的话从routes里面删除掉
const navRoutes = routes.filter(route => route.isNav === true)
class App extends Component {
    render() {
        return (
            //外层路由
            <Frame routes={navRoutes}>
                <Switch>
                    {
                        routes.map(route => {
                            console.log(route)

                            return (
                                //渲染route
                                <Route
                                    key={route.path}//相当于DOM里面的id
                                    path={route.path}
                                    exact={route.isExact}
                                    render={(props) => {//要做权限管理所以需要render改变状态
                                        //TODO:尚未进行权限判断
                                        return <route.component {...props} />
                                    }}
                                />
                            )
                        })
                    }
                    {/* 解决页面跳转问题及页面跳转出错admin后 */}
                    <Redirect to="/admin/dashboard" from="/admin" exact />
                    <Redirect to="/404" />
                </Switch>
            </Frame>

        )
    }
}
export default App;